<template>
  <view class="car-maintenance-container">
    <view class="header">
      <view class="back-btn" @tap="navigateBack">
        <text class="back-icon">←</text>
      </view>
      <text class="title">车辆维修</text>
    
    </view>

    <!-- 地图区域 - 铺满整个页面 -->
    <view class="map-container">
      <!-- 地图组件 - 显示用户位置和门店位置标记 -->
      <map 
        class="map-component"
        :longitude="mapCenter.longitude"
        :latitude="mapCenter.latitude"
        :scale="14"
        :markers="markers"
        @markertap="onMarkerTap"
        :show-location="true"
      ></map>
    </view>

    <!-- 门店信息卡片 - 固定在底部 -->
    <view class="shop-card" :style="{ display: isPhonePopupVisible ? 'none' : 'block' }">
      <!-- 门店基本信息 -->
      <view class="shop-header">
        <view class="shop-header-container">
          <view class="shop-info">
            <text class="shop-name">{{ nearestShop.name }}</text>
            <view class="rating-distance">
              <view class="rating">
                <text class="star">★★★★★</text>
                <text class="score">{{ nearestShop.score }}分</text>
              </view>
              <text class="distance">{{ nearestShop.distance }}m</text>
            </view>
          </view>
          <button class="nearby-shops-button" @click="goToNearbyShops">附近门店</button>
        </view>
      </view>

      <!-- 门店详细信息 -->
      <view class="shop-details">
        <view class="detail-item">
          <text class="detail-label">营业时间：</text>
          <text class="detail-value">{{ nearestShop.businessHours }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">地址：</text>
          <text class="detail-value">{{ nearestShop.address }}</text>
        </view>
      </view>

      <!-- 门店图片 -->
      <image class="shop-image" :src="nearestShop.imageUrl" mode="aspectFill"></image>

      <!-- 操作按钮 -->
      <view class="action-buttons">
        <button class="contact-button" @click="contactShop">联系门店</button>
        <button class="book-button" @click="showShopDetails">立即预定</button>
      </view>
      
      
    </view>

    <!-- 电话联系弹窗 -->
    <uni-popup ref="phonePopup" type="bottom" :maskClick="false" @change="popupChange">
      <view class="phone-popup-container">
        <view class="phone-popup-content">
          <text class="phone-number">{{ nearestShop.phone }}</text>
        </view>
        <view class="phone-popup-footer">
          <button class="call-button" @click="makePhoneCall">呼叫</button>
          <button class="cancel-button" @click="closePopup">取消</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue';
export default {
  name: 'CarMaintenanceIndex',
  components: {
    uniPopup
  },
  computed: {
    // 计算地图中心点
    mapCenter() {
      // 如果有用户位置，以用户位置为中心
      if (this.currentLocation) {
        return {
          latitude: this.currentLocation.latitude,
          longitude: this.currentLocation.longitude
        };
      }
      // 否则以第一个店铺位置为中心
      if (this.shopsData && this.shopsData.length > 0) {
        return {
          latitude: this.shopsData[0].latitude,
          longitude: this.shopsData[0].longitude
        };
      }
      // 默认中心点
      return {
        latitude: 39.9093,
        longitude: 116.3974
      };
    }
  },
  data() {
    return {
      currentLocation: null,
      markers: [], // 标记点数组
      nearestShop: {
        id: '1',
        name: '伟业汽车维修厂(人民路店)',
        score: 3,
        distance: 444,
        businessHours: '周一至周五 09:00-22:00',
        address: '山阳区人民路中路32号',
        phone: '18893029302',
        imageUrl: '../../static/car-repair-shop.png',
        latitude: 39.9054,
        longitude: 116.3985
      },
      shopsData: [
        {
          id: '1',
          name: '伟业汽车维修厂(人民路店)',
          score: 3,
          distance: 444,
          reviewsCount: 322,
          businessHours: '周一至周日 09:00-22:00',
          address: '山阳区人民路中路32号',
          imageUrl: '../../static/car-repair-shop.png',
          latitude: 39.9054,
          longitude: 116.3985
        },
        {
          id: '2',
          name: '车友汇汽车服务中心',
          score: 3.5,
          distance: 666,
          reviewsCount: 215,
          businessHours: '周一至周日 09:00-22:00',
          address: '山阳区人民南路32号',
          imageUrl: '../../static/car-repair-shop.png',
          latitude: 39.9078,
          longitude: 116.4012
        },
        {
          id: '3',
          name: '速修汽车美容店',
          score: 4,
          distance: 888,
          reviewsCount: 189,
          businessHours: '周一至周日 09:00-22:00',
          address: '山阳区人民北路32号',
          imageUrl: '../../static/car-repair-shop.png',
          latitude: 39.9101,
          longitude: 116.3958
        }
      ],
      isPhonePopupVisible: false
    }
  },
  
  onLoad() {
    // 页面加载时获取用户位置和门店数据
    this.getUserLocation();
    this.fetchShopData();
  },
  onShow() {
    // 每次页面显示时都尝试更新位置和门店数据
    this.getUserLocation();
    this.fetchShopData();
  },
  methods: {
    // 从接口获取门店数据
    fetchShopData() {
      uni.request({
        url: 'http://localhost:8080/cc/merchant/list',
        method: 'GET',
        data: {
          id: 1
        },
        success: (res) => {
          console.log('获取门店数据成功:', res.data);
          if (res.data.code === 200 && res.data.data && res.data.data.length > 0) {
            const shopData = res.data.data[0];
            
            // 格式化营业时间
            const formatBusinessHours = (startTime, endTime) => {
              // 如果startTime和endTime是字符串，直接返回格式化后的时间
              if (typeof startTime === 'string' && typeof endTime === 'string') {
                return `${startTime} - ${endTime}`;
              }
              return '09:00 - 21:00';
            };
            
            // 更新最近门店信息
            this.nearestShop = {
              id: shopData.id.toString(),
              name: shopData.name,
              score: shopData.rate || 0,
              distance: 444, // 可以根据经纬度计算实际距离
              businessHours: formatBusinessHours(shopData.startTime, shopData.endTime),
              address: shopData.address,
              phone: shopData.phone, // 使用接口返回的phone字段
              imageUrl: '../../static/car-repair-shop.png',
              latitude: parseFloat(shopData.latitude) || 39.9093,
              longitude: parseFloat(shopData.longitude) || 116.3974
            };
            
            // 更新门店数据数组
            this.shopsData = [{
              id: shopData.id.toString(),
              name: shopData.name,
              score: shopData.rate || 0,
              distance: 444,
              reviewsCount: 0,
              businessHours: formatBusinessHours(shopData.startTime, shopData.endTime),
              address: shopData.address,
              imageUrl: '../../static/car-repair-shop.png',
              latitude: parseFloat(shopData.latitude) || 39.9093,
              longitude: parseFloat(shopData.longitude) || 116.3974,
              phone: shopData.phone // 保存phone字段用于弹窗显示
            }];
            
            console.log('更新后的门店信息:', this.nearestShop);
            console.log('更新后的门店数据数组:', this.shopsData);
            
            // 更新地图标记
            this.updateUserMarker();
          }
        },
        fail: (err) => {
          console.error('获取门店数据失败:', err);
          // 显示错误提示
          uni.showToast({
            title: '获取门店数据失败',
            icon: 'none'
          });
          // 如果获取失败，保留默认数据
        },
        complete: () => {
          console.log('门店数据获取操作完成');
        }
      });
    },
    navigateBack() {
      uni.navigateBack();
    },
    goToActivityList() {
      uni.navigateTo({
        url: '/pages/activity-list/activity-list'
      });
    },
    goToNearbyShops() {
      // 跳转到附近门店页面
      uni.navigateTo({
        url: '/pages/nearby-shops/nearby-shops'
      });
    },
    getUserLocation() {
      // 第一步：检查权限状态
      uni.getSetting({
        success: (settingRes) => {
          if (settingRes.authSetting['scope.userLocation']) {
            // 已授权，直接获取位置
            console.log('用户已授权位置权限');
            this.fetchLocation();
          } else if (settingRes.authSetting['scope.userLocation'] === undefined) {
            // 未设置权限，首次请求
            this.requestLocationPermission();
          } else {
            // 已拒绝授权，引导用户开启
            this.guideToLocationSettings();
          }
        },
        fail: (err) => {
          console.error('获取设置信息失败:', err);
          // 使用默认位置并提示用户
          this.showLocationError('获取位置设置失败');
          this.setDefaultLocation();
        }
      });
    },
    
    // 请求位置权限
    requestLocationPermission() {
      uni.authorize({
        scope: 'scope.userLocation',
        success: () => {
          console.log('用户授权位置权限成功');
          this.fetchLocation();
        },
        fail: (err) => {
          console.error('用户拒绝位置权限:', err);
          this.guideToLocationSettings();
        }
      });
    },
    
    // 引导用户到设置页面
    guideToLocationSettings() {
      uni.showModal({
        title: '位置权限未开启',
        content: '需要您的位置权限来获取附近门店信息，请前往设置开启',
        confirmText: '去设置',
        cancelText: '暂不开启',
        showCancel: true,
        success: (res) => {
          if (res.confirm) {
            // 跳转到设置页面
            uni.openSetting({
              success: (settingRes) => {
                console.log('设置页面返回:', settingRes);
                if (settingRes.authSetting['scope.userLocation']) {
                  // 用户在设置中开启了权限
                  this.fetchLocation();
                } else {
                  // 用户未开启权限，使用默认位置
                  this.showLocationError('位置权限未开启，使用默认位置');
                  this.setDefaultLocation();
                }
              },
              fail: (err) => {
                console.error('打开设置页面失败:', err);
                this.showLocationError('无法打开设置页面');
                this.setDefaultLocation();
              }
            });
          } else {
            // 用户取消，使用默认位置
            this.showLocationError('位置权限未开启，使用默认位置');
            this.setDefaultLocation();
          }
        }
      });
    },
    
    // 实际获取位置信息的方法
    fetchLocation() {
      // 为了解决开发环境下的问题，添加错误处理
      try {
        uni.getLocation({
          type: 'gcj02',
          altitude: true,
          isHighAccuracy: true,
          timeout: 10000, // 10秒超时
          success: (res) => {
            this.currentLocation = {
              latitude: res.latitude,
              longitude: res.longitude,
              address: `当前位置: 纬度${res.latitude.toFixed(6)}, 经度${res.longitude.toFixed(6)}`,
              accuracy: res.accuracy || '未知'
            };
            console.log('获取位置成功:', this.currentLocation);
            
            // 更新地图标记点，显示用户当前位置
            this.updateUserMarker();
            
            // 显示获取成功提示
            uni.showToast({
              title: '位置获取成功',
              icon: 'success',
              duration: 1500
            });
          },
          fail: (err) => {
            console.error('获取位置失败:', err);
            // 详细的错误处理
            if (err.errMsg.includes('auth deny')) {
              this.showLocationError('位置权限被拒绝');
            } else if (err.errMsg.includes('system permission')) {
              this.showLocationError('系统位置权限未开启');
            } else if (err.errMsg.includes('timeout')) {
              this.showLocationError('位置获取超时');
            } else {
              this.showLocationError('位置获取失败');
            }
            this.setDefaultLocation();
          },
          complete: () => {
            console.log('位置获取操作完成');
          }
        });
      } catch (error) {
        console.error('位置获取发生异常:', error);
        this.showLocationError('位置获取异常');
        this.setDefaultLocation();
      }
    },
    
    // 显示位置错误提示
    showLocationError(message) {
      uni.showToast({
        title: message || '位置获取失败',
        icon: 'none',
        duration: 2500
      });
    },
    
    // 更新用户位置标记
    updateUserMarker() {
      // 初始化空的标记数组
      this.markers = [];
      
      // 如果有用户位置，添加用户位置标记
      if (this.currentLocation) {
        const userMarker = {
          id: 1,
          latitude: this.currentLocation.latitude,
          longitude: this.currentLocation.longitude,
          width: 30,
          height: 30,
          type: 5, // 使用微信小程序地图组件支持的标记类型
          color: '#1aad19', // 用户位置标记颜色：绿色
          label: {
            content: '我',
            color: '#ffffff',
            fontSize: 12,
            x: 0,
            y: -20,
            borderRadius: 10,
            backgroundColor: '#1aad19',
            padding: 2
          },
          callout: {
            content: this.currentLocation.address,
            display: 'BYCLICK',
            padding: 5,
            borderRadius: 5,
            bgColor: '#ffffff',
            color: '#333333',
            fontSize: 12
          }
        };
        this.markers.push(userMarker);
      }
      
      // 添加所有店铺标记，使用从接口获取的数据
      if (this.shopsData && this.shopsData.length > 0) {
        this.shopsData.forEach((shop) => {
          // 为每个店铺创建一个唯一的id，从2开始（1已用于用户位置）
          const shopMarker = {
            id: parseInt(shop.id) + 1, // 确保id是数字类型，避免与用户标记冲突
            latitude: parseFloat(shop.latitude) || 39.9093, // 确保经纬度是数字类型
            longitude: parseFloat(shop.longitude) || 116.3974,
            width: 30,
            height: 30,
            type: 5, // 使用微信小程序地图组件支持的标记类型
            color: '#0066ff', // 门店标记颜色：蓝色
            label: {
              content: shop.name && shop.name.length > 2 ? shop.name.substring(0, 2) : (shop.name || '门店'), // 显示店铺名称前两个字
              color: '#ffffff',
              fontSize: 10,
              x: 0,
              y: -20,
              borderRadius: 10,
              backgroundColor: '#0066ff',
              padding: 2
            },
            callout: {
              content: `${shop.name || '未知门店'}\n距离: ${shop.distance || '未知'}m`,
              display: 'BYCLICK',
              padding: 5,
              borderRadius: 5,
              bgColor: '#ffffff',
              color: '#333333',
              fontSize: 12
            },
            // 添加额外数据用于后续交互，确保包含phone字段
            shopData: {
              ...shop,
              phone: shop.phone || '' // 确保phone字段存在
            }
          };
          this.markers.push(shopMarker);
        });
      }
      
      console.log('地图标记已更新，共', this.markers.length, '个标记:', this.markers);
    },
      setDefaultLocation() {
        // 使用默认位置
      this.currentLocation = {
        latitude: 39.9093,
        longitude: 116.3974,
        address: '使用默认位置'
      };
      console.log('使用默认位置:', this.currentLocation);
      
      // 更新地图标记点，显示默认位置
      this.updateUserMarker();
    },
    contactShop() {
      // 显示电话联系弹窗
      this.$refs.phonePopup.open();
    },
    
    closePopup() {
      // 关闭电话联系弹窗
      this.$refs.phonePopup.close();
    },
    
    // 处理标记点点击事件
    onMarkerTap(e) {
      const markerId = e.markerId;
      console.log('点击了标记点:', markerId);
      
      // 找到对应的标记数据
      const marker = this.markers.find(m => m.id === markerId);
      
      if (marker && marker.shopData) {
        // 如果点击的是店铺标记
        console.log('点击了店铺:', marker.shopData.name);
        
        // 显示店铺信息弹窗
        uni.showModal({
          title: marker.shopData.name,
          content: `评分: ${marker.shopData.score}\n距离: ${marker.shopData.distance}m\n地址: ${marker.shopData.address}\n营业时间: ${marker.shopData.businessHours}`,
          confirmText: '查看详情',
          cancelText: '取消',
          success: (res) => {
            if (res.confirm) {
              // 跳转到附近门店页面并选中该店铺
              uni.navigateTo({
                url: `/pages/nearby-shops/nearby-shops?selectedId=${marker.shopData.id}`
              });
            }
          }
        });
      } else if (markerId === 1) {
        // 如果点击的是用户自己的位置标记
        console.log('点击了用户位置');
        // 可以显示当前位置信息或其他操作
      }
    },
    
    popupChange(e) {
      // 弹窗状态变化回调
      this.isPhonePopupVisible = e.show;
      // 直接通过数据绑定控制门店信息卡片的显示/隐藏
    },
    
    makePhoneCall() {
      // 调用系统电话功能
      uni.makePhoneCall({
        phoneNumber: this.nearestShop.phone,
        success: () => {
          console.log('拨打电话成功');
        },
        fail: (err) => {
          console.error('拨打电话失败:', err);
        }
      });
      // 关闭弹窗
      this.closePopup();
    },
    showShopDetails() {
      // 跳转到门店详情页面
      uni.navigateTo({
        url: '/pages/shop-details/shop-details?id=' + this.nearestShop.id
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.car-maintenance-container {
  background-color: #f8f8f8;
  min-height: 100vh;
}

.header {
  padding: 60rpx 0 30rpx 0;
  text-align: center;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.back-btn {
  position: absolute;
  left: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  padding: 10rpx;
  margin-top: 10px;
}

.back-icon {
  font-size: 40rpx;
  font-weight: bold;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin: auto;
}

.header-right {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  padding: 10rpx;
  display: flex;
  align-items: center;
}

.more-icon,
.location-icon {
  font-size: 32rpx;
  margin-left: 20rpx;
}

.shop-header-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding-right: 30rpx; /* 调整为合适的右侧内边距 */
}

.shop-info {
  flex: 1; /* 让店铺信息占据剩余空间 */
  margin-right: 20rpx; /* 与按钮保持一定距离 */
}

.nearby-shops-button {
  background-color: #1677ff;
  color: white;
  border-radius: 16rpx;
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  white-space: nowrap; /* 防止按钮文字换行 */
}

/* 地图区域 */
.map-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 100rpx;
  height: calc(100vh - 100rpx);
  z-index: 1;
}

.map-component {
  width: 100%;
  height: 100%;
}

/* 门店信息卡片 */
.shop-card {
  background-color: #fff;
  margin: 0 30rpx 0 30rpx;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx;
  box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* 电话联系弹窗样式 */
.phone-popup-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  background-color: #fff;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  z-index: 9999;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.phone-popup-content {
  padding: 40rpx 0;
  text-align: center;
  border-bottom: 1rpx solid #f5f5f5;
}

.phone-number {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
}

.phone-popup-footer {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  padding-top: 20rpx;
}

.call-button,
.cancel-button {
  border-radius: 8rpx;
  font-size: 32rpx;
  height: 96rpx;
  line-height: 96rpx;
  margin: 0;
}

.call-button {
  background-color: #1677ff;
  color: #fff;
  border: none;
  width: 100%;
}

.cancel-button {
  background-color: #f5f5f5;
  color: #666;
  border: none;
  width: 100%;
}

.shop-header {
  margin-bottom: 20rpx;
  width: 100%;
}

.shop-name {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.rating-distance {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rating {
  display: flex;
  align-items: center;
}

.star {
  color: #ffc107;
  font-size: 24rpx;
  margin-right: 8rpx;
}

.score {
  color: #666;
  font-size: 24rpx;
}

.distance {
  color: #1677ff;
  font-size: 26rpx;
  font-weight: bold;
}

.shop-details {
  margin-bottom: 20rpx;
}

.detail-item {
  margin-bottom: 10rpx;
  font-size: 26rpx;
  color: #666;
}

.detail-label {
  color: #999;
}

.shop-image {
  width: 100%;
  height: 200rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.activity-entry {
  position: absolute;
  top: 100rpx;
  right: 40rpx;
  background-color: #ff6b6b;
  color: white;
  padding: 20rpx 30rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 16rpx rgba(255, 107, 107, 0.4);
  z-index: 99;
}

.activity-icon {
  font-size: 36rpx;
  margin-right: 10rpx;
}

.activity-text {
  font-size: 28rpx;
  font-weight: bold;
}

.action-buttons {
  display: flex;
  gap: 20rpx;
}

.contact-button,
.book-button {
  flex: 1;
  border-radius: 8rpx;
  font-size: 28rpx;
  height: 80rpx;
  line-height: 80rpx;
}

.contact-button {
  background-color: #fff;
  color: #1677ff;
  border: 2rpx solid #1677ff;
}

.book-button {
  background-color: #ff4757;
  color: #fff;
  border: none;
}
</style>
    
      